<template>
  <div class="view">
    <van-row  type="flex" justify="space-around">
      <van-col span="6">span: 8</van-col>
      <van-col span="6">span: 8</van-col>
      <van-col span="6">span: 8</van-col>
    </van-row>
    <van-row >
      <van-col span="12"><span>span: 8</span>
      <span>span: 8</span>
      </van-col>
      <van-col span="4">span: 8</van-col>
      <van-col span="4">span: 8</van-col>
    </van-row>
    <van-row type="flex" justify="space-around">
      <van-button type="primary" @click="date">日期选择</van-button>
      <van-button type="info" @click="form">表单</van-button>
      <van-button type="default">默认按钮</van-button>
      <!-- <van-button type="warning">警告按钮</van-button>
      <van-button type="danger">危险按钮</van-button> -->
    </van-row>
    <van-cell-group>
      <van-cell title="单元格" value="内容" />
      <van-cell title="单元格" value="内容" label="描述信息" />
    </van-cell-group>
    <van-cell is-link @click="showPopup">展示弹出层</van-cell>
    <van-popup v-model="show" position="top" :style="{ height: '30%' }">
      <div class="box">
          <div class="child" @click="title">
            我躲起来了
            你看不见我
          </div>
      </div>
    </van-popup>
    <van-cell title="单元格" icon="location-o" />
    <van-icon name="chat-o" dot />
    <van-icon name="chat-o" badge="9" />
    <van-icon name="chat-o" badge="99+" />
    <div class="van-multi-ellipsis--l2">
      这是一段最多显示两行的文字，多余的内容会被省略
    </div>
    <van-button @click="toast">爱心</van-button>
    <van-image width="100" height="100" src="https://img.yzcdn.cn/vant/cat.jpeg" />
  </div>
</template>

<script>
export default {
  data () {
    return {
      show: false,
    }
  },
  filters:{
    mount (val) {
      return val + 1
    }
  },
  methods: {
    showPopup() {
      this.show = true;
    },
    title () {
      this.$dialog.alert({
      message: '弹窗内容',
      showCancelButton: true
    }).then(()=>{
      this.$dialog.alert({
        message: '不要点我'
      })
    }).catch(()=>{
      this.$dialog.alert({
        message: '点错了'
      })
    })
    },
    form () {
      this.$router.push({
        path: '/form'
      })
    },
    toast () {
      this.$toast({
        message: '自定义图标',
        icon: 'like-o',
      })
    },
    date () {
      this.$router.push({
        path:'/date'
      })
    }
  }
}
</script>

<style>
.box {
 display: flex;
 align-items: center;
 justify-content: center;
 height: 100%;
 width: 100%;
}
.box .child {
  border: 1px solid red;

}
.view {
  margin: 10px;
  border: 1px solid black;
}
.van-col--8 {
  border: 1px solid red !important;
}
</style>